
import { addGoods, uploadGoodsImg } from "../../api/goods";
import "./addbtn.less";
import Title from "../../components/Title/Title";
import React, { useEffect, useState} from "react";
import {
    Form,
    Input,
    Button,
    Select,
    InputNumber,
    Upload,
} from 'antd';
import { useNavigate } from 'react-router-dom';
import { PlusOutlined } from '@ant-design/icons';

export default function GoodsAdd() {
    const navigate = useNavigate()
    const { TextArea } = Input;
    const [imgUrl, setImgUrl] = useState("");
    const [imgItem, setImgItem] = useState("");

    const [form] = Form.useForm();
    const layout = {
        labelCol: {
            span: 2,
        },
    };
    const tailLayout = {
        wrapperCol: {
            offset: 2,
        },
    };

    const normFile = (e) => {
        if (Array.isArray(e)) {
            return e;
        }
        return e?.fileList;
    };
    const { Option } = Select;
    const [options] = useState([
        {
            value: '热销榜',
            name: '热销榜',
        },
        {
            value: '新品专享',
            name: '新品专享',
        },
        {
            value: '现炒盖饭',
            name: '现炒盖饭',
        },
        {
            value: '烧烤',
            name: '烧烤',
        },
        {
          value: '冒菜',
          name: '冒菜',
      },
      {
        value: '海鲜自助',
        name: '海鲜自助',
    },
    {
      value: '小吃',
      name: '小吃',
  },
    ]);

    const handleChange = async ({ file }) => {
        const formData = new FormData();
        formData.append('file', file);
        const res = await uploadGoodsImg(formData);
        console.log(res.data.imgUrl);
        if (res.data.code == 0) {
            setImgUrl(`http://8.137.157.16:9002${res.data.imgUrl}`);
            let index = res.data.imgUrl.lastIndexOf('/');
            setImgItem(res.data.imgUrl.substring(index + 1));
        }
    };

    const onFinish = async (values) => {
        const data = {
            name: values.name,
            category: values.category,
            price: values.price,
            imgUrl: imgItem,
            goodsDesc: values.goodsDesc
        }
        let res = await addGoods(data);
        console.log(res.data);
        navigate('/goods')
    };

    return (
        <>
            <div className="app-content">
                <Title title= '添加商品'>
                    {/* <div className="title">
                        添加商品
                    </div> */}
                </Title>

                <div className="content-info">
                    <Form
                        {...layout}
                        form={form}
                        name="control-hooks"
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="name"
                            label="商品名称"
                        >
                            <Input style={{
                                width: '100%',
                                height: 40,
                            }} />

                        </Form.Item>
                        <Form.Item
                            name="category"
                            label="商品分类"
                        >
                            <Select
                                placeholder="请选择商品分类"
                                allowClear
                                style={{
                                    width: 240,
                                    height: 40,
                                }}
                            >
                                {
                                    options.map(option => {
                                        return (
                                            <Option value={option.value} key={option.value}>
                                                {option.name}
                                            </Option>
                                        )
                                    })}
                            </Select>
                        </Form.Item>
                        <Form.Item label="商品价格" name="price">
                            <InputNumber size="large" min={0} />
                        </Form.Item>

                        <Form.Item
                            label="商品图片"
                            valuePropName="fileList"
                            getValueFromEvent={normFile}
                            name="imgUrl"
                        >
                            <Upload
                                accept="image/png, image/jpeg"
                                customRequest={handleChange}
                                listType="picture-card"
                                showUploadList={false}
                            >
                                {imgUrl ? (
                                    <img src={imgUrl} alt="" style={{ width: 105, height: 105 }} />
                                ) : (<button
                                    style={{
                                        border: 0,
                                        background: 'none',
                                    }}
                                    type="button"
                                >
                                    <PlusOutlined />
                                </button>)}

                            </Upload>
                        </Form.Item>
                        <Form.Item
                            label="商品描述"
                            name="goodsDesc"
                        >
                            <TextArea rows={4} />
                        </Form.Item>

                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit" style={{ width: 100, height: 40 }}>
                                添加商品
                            </Button>
                        </Form.Item>
                    </Form>
                </div>

            </div>
        </>
    )
}
